<template>
  <div class="plot-symbol">
    <!-- <el-tabs v-model="activeName" style="color:#fff;padding:2px 4px;display:none" @tab-click="handleClick">
      <el-tab-pane
        v-for="(task,index) in featureServices"
        :key="index"
        :label="task.name"
        :name="task.name"
      />
    </el-tabs>-->

    <el-collapse accordion @change="handleClick" v-model="active">
      <el-collapse-item v-for="(task,index) in featureServices" :key="index" :name="index">
        <template slot="title">
          {{task.name}}
          <i class="header-icon el-icon-info"></i>
        </template>
        <el-row v-for="row in rows" :key="row.id">
          <el-col v-for="s in row.data" :span="6" :key="s.id">
            <div class="card" @click="onSymbolSelected(s)">
              <PlotSymbol
                :flag="s.flag"
                :line-width="s.lineWidth"
                :stroke-style="s.strokeStyle"
                :fill-style="s.fillStyle"
                :scale="s.scale"
                :active="isSelected === s._id"
                :name="s.name"
              />
            </div>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { mapState } from "vuex";
import PlotSymbol from "@/components/PlotSymbol";

export default {
  name: "Index",
  components: { PlotSymbol },
  data() {
    return {
      isSelected: undefined,
      active: -1
    };
  },
  methods: {
    onSymbolSelected(s) {
      this.isSelected = s._id; // 处理点击事件
      // 设置标绘模式
      this.mapServiceLeft.setSelectSymbol(s);
      this.mapServiceRight.setSelectSymbol(s);
      switch (s.type) {
        case 0:
          this.mapServiceLeft.setChangeMode("draw_point", s._id);
          this.mapServiceRight.setChangeMode("draw_point", s._id);
          break;
        case 1:
          this.mapServiceLeft.setChangeMode("draw_line_string", s._id);
          this.mapServiceRight.setChangeMode("draw_line_string", s._id);
          break;
        case 2:
          this.mapServiceLeft.setChangeMode("draw_polygon", s._id);
          this.mapServiceRight.setChangeMode("draw_polygon", s._id);
          break;
      }
    },
    handleClick() {
      if (this.active === "") {
        this.$store.commit("xcgl/setEditTableVisible", false);
        this.$store.commit("xcgl/setFeatureCollection", []);
        this.mapServiceLeft.setDrawControlFC({
          type: "FeatureCollection",
          features: []
        });
        this.mapServiceRight.setDrawControlFC({
          type: "FeatureCollection",
          features: []
        });
      } else {
        const task = this.featureServices[this.active];
        this.$store.dispatch("xcgl/RequestFeatureFromTask", task);
      }
    }
  },
  computed: {
    ...mapState({
      symbols(state) {
        return state.xcgl.selectTask ? state.xcgl.selectTask.symbol : [];
      },
      mapServiceRight(state) {
        return state.xcgl.mapServiceRight;
      },
      mapServiceLeft(state) {
        return state.xcgl.mapServiceLeft;
      },
      featureServices(state) {
        return state.xcgl.featureService;
      }
    }),
    rows() {
      const row = Math.ceil(this.symbols.length / 4);
      const rows = [];
      for (var i = 0; i < row; i++) {
        const start = i * 4;
        const end = (i + 1) * 4;
        rows.push({
          id: i,
          data: this.symbols.slice(
            start,
            end > this.symbols.length ? this.symbols.length : end
          )
        });
      }
      return rows;
    }
  },
  mounted() {
    //  this.handleClick()
  }
};
</script>
<style>
.plot-symbol {
  height: auto;
  width: 100%;
}

.plot-symbol .el-tabs__item {
  color: #fff;
}

.card {
  text-align: center;
  padding: 5px;
}

.card:hover {
  cursor: pointer;
}

.card div {
  font-size: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.plot-symbol .box img {
  margin-bottom: 3px;
  display: block;
}

.el-collapse-item__header {
  background: transparent;
  color: #fff;
  padding-left: 8px;
}
.el-collapse-item__wrap {
  background: transparent;
}
s-name {
  font-size: 5px;
}
</style>

